<template>
  <div>
    <h1>当前的值为:{{ sum }}</h1>
    <h1>当前10倍的值为:{{ bigSum }}</h1>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="INCREMENT(n)">+</button>
    <button @click="DECREMENT(n)">-</button>
    <button @click="incrementOdd(n)">奇数时+</button>
    <button @click="incrementWait(n)">等一等在+</button>
    <h1>一共有{{ PeopleList.length }}个人</h1>
    <hr />
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState, mapGetters } from "vuex";
export default {
  name: "HelloWorld",
  data() {
    return {
      n: 0,
    };
  },
  computed: {
    ...mapState("addAbout", ["sum"]),
    ...mapState("personAbout", ["PeopleList"]),
    ...mapGetters("addAbout", ["bigSum"]),
  },
  methods: {
    // ...mapActions("addAbout",["incrementOdd","incrementWait"]),
    // ...mapMutations("addAbout",["INCREMENT","DECREMENT"]),

    INCREMENT(n) {
      this.$store.commit("addAbout/INCREMENT", n);
    },
    DECREMENT(n) {
      this.$store.commit("addAbout/DECREMENT", n); // ✅ 也需要指定命名空间
    },
    incrementOdd(n) {
      this.$store.dispatch("addAbout/incrementOdd", n); // ✅ 也需要指定命名空间
    },
    incrementWait(n) {
      this.$store.dispatch("addAbout/incrementWait", n); // ✅ 也需要指定命名空间
    },
  },
  mounted() {
    console.log(this.$store);
  },
};
</script>

<style scoped>
button {
  margin-left: 10px;
}
</style>
